import React, { useState } from 'react'
import { CardWrap, ContentWrap } from './Style.js'
import { Card, Modal, Button } from 'antd'
import CityForm from './components/CityComponent'
import CityTable from './components/CityTable'
import { ExclamationCircleOutlined } from '@ant-design/icons'
import AddCityComponent from './components/AddCity'
import './City.less'
function CityComponent() {
  const [FormCity, setFormCity] = useState({})
  const [ModalFlag, setModalFlag] = useState(false)
  function Formcity(content) {
    setFormCity(content)
    Modal.info({
      title: 'info提示框',
      icon: <ExclamationCircleOutlined />,
      content: JSON.stringify(content),
      okText: '确认',
      cancelText: '取消',
    })
  }
  function showmodal() {
    setModalFlag(true)
    setFormCity({})
  }
  function addCity_change(content) {
    console.log('弹出框开始')
    setFormCity(content)
    setModalFlag(false)
  }
  return (
    <ContentWrap>
      <CardWrap>
        <Card title="城市管理使用">
          <p>1.上下分成两个部分</p>
          <p>Modal页脚要是什么都没有可以填写null</p>
          <p>传值必须在onFinish里面写 </p>
        </Card>
      </CardWrap>
      <CardWrap>
        <Card title="筛选条件">
          <CityForm chooseCity={Formcity}></CityForm>
          <div style={{ height: '30px' }}></div>
          <Button type="primary" onClick={showmodal}>
            添加城市
          </Button>
          <div style={{ height: '30px' }}></div>
          <CityTable></CityTable>
        </Card>
      </CardWrap>
      {/*增加城市*/}
      <Modal
        visible={ModalFlag}
        title="增加城市"
        footer={null}
        closable={false}
      >
        <AddCityComponent addCity={addCity_change}></AddCityComponent>
      </Modal>
    </ContentWrap>
  )
}
export default CityComponent
